<template>
  <div
    class="count-flop"
    :key="compKey"
    :style="{ 'font-size': fontSize, height: fontSize }"
  >
    <div
      :class="
        item != '.' && item != ',' ? 'count-flop-box' : 'count-flop-point'
      "
      :style="{
        'background-color': item != '.' && item != ',' ? background : 'unset',
        'line-height': item != '.' && item != ',' ? fontSize : '23px',
        width: item != '.' && item != ',' ? flopNumWidth : '16px',
      }"
      v-for="(item, index) in value"
      :key="index"
    >
      <div v-if="item == ','" class="count-flop-content">,</div>
      <div v-else-if="item == '.'" class="count-flop-content">.</div>
      <div v-else class="count-flop-content" :class="['rolling_' + item]">
        <div
          v-for="(item2, index2) in numberList"
          :key="index2"
          class="count-flop-num"
        >
          {{ item2 }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    val: {
      default: 0,
    },
    fontSize: {
      default: "20px",
    },
    flopNumWidth: {
      default: "16px",
    },
    background: {
      default: "transparent",
    },
  },
  data() {
    return {
      value: [],
      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      compKey: 0,
    };
  },
  watch: {
    val() {
      this.value = this.val.toString().split("");
      this.compKey += 1;
    },
  },
  created() {
    this.value = this.val.toString().split("");
  },
};
</script>
<style scoped>
.count-flop {
  display: inline-block;
  height: 24px;
  /*color: #fff;*/
  /*margin: 10px 0;*/
}

.count-flop > div {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%;
}

.count-flop-box {
  width: 16px;
  line-height: 24px;
  /*margin-right: 3px;*/
}

.count-flop-box:last-child {
  margin: 0;
}

.count-flop-point {
  /*line-height: normal;*/
  width: 5px;
  line-height: 24px;
  margin-right: 3px;
}

.count-flop-content {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation-fill-mode: forwards !important;
}
.count-flop-unit {
  width: 68px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  align-items: center;
  letter-spacing: 0.1em;
  color: #ffffff;
}
.rolling_0 {
  animation: rolling_0 1.5s ease;
}

@keyframes rolling_0 {
  from {
    transform: translateY(-90%);
  }
  to {
    transform: translateY(0);
  }
}

.rolling_1 {
  animation: rolling_1 1.5s ease;
}

@keyframes rolling_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.rolling_2 {
  animation: rolling_2 1.5s ease;
}

@keyframes rolling_2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20%);
  }
}

.rolling_3 {
  animation: rolling_3 1.5s ease;
}

@keyframes rolling_3 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-30%);
  }
}

.rolling_4 {
  animation: rolling_4 1.5s ease;
}

@keyframes rolling_4 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40%);
  }
}

.rolling_5 {
  animation: rolling_5 1.5s ease;
}

@keyframes rolling_5 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.rolling_6 {
  animation: rolling_6 1.5s ease;
}

@keyframes rolling_6 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-60%);
  }
}

.rolling_7 {
  animation: rolling_7 1.5s ease;
}

@keyframes rolling_7 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-70%);
  }
}

.rolling_8 {
  animation: rolling_8 1.5s ease;
}

@keyframes rolling_8 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-80%);
  }
}

.rolling_9 {
  animation: rolling_9 1.5s ease;
}

@keyframes rolling_9 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-90%);
  }
}
</style>
